Content, padding, border and margin: how the browser calculates the space every element takes up.
Every element is rendered as a rectangular box made of four layers: the content area, padding around it, a border around the padding, and margin outside the border. By default (box-sizing: content-box) the width and height you set apply only to the content, so padding and border are added on top, and a 200px-wide box with 20px padding and a 5px border actually occupies 250px horizontally.
That surprise is why many projects reset to box-sizing: border-box, where width and height include padding and border, making sizes far more predictable. Interviewers also ask about margin collapsing, where adjacent vertical margins of block elements merge into the larger one rather than adding up, and about the difference between padding (inside, takes the element's background) and margin (outside, always transparent). Knowing how to inspect the box model in browser dev tools is a practical bonus.
What you'll walk away knowing
No questions match "".